<!-- the detail of a project -->
<?php 
//设置标题
$_title="详细项目信息";
include_once("../header.php")
 ?>

<body class="metrouicss">
  <style>
   sponsorBlock li
   {
     font-size:14px;
     margin:10px;
   }
   .grid table.jqplot-table-legend{
     width:auto;
   }
  </style>
    <!-- 引入javascript -->
    <script type="text/javascript" src="../../js/jqplot/jquery.jqplot.min.js"></script>
    <link href="../../js/jqplot/jquery.jqplot.min.css" type="text/css" rel="stylesheet"></link>
    <?php 
    $srcNames = array("dateAxisRenderer","canvasTextRenderer","canvasAxisTickRenderer","pieRenderer","donutRenderer","categoryAxisRenderer","pointLabels","barRenderer","json2");
    foreach($srcNames as $src)
    {
    ?>
    <script type="text/javascript" src="../../js/jqplot/plugins/<?= "jqplot.".$src.".min.js" ?>" ></script>
    <?php } ?>
    <!-- top -->
    <?php include_once("../menu.php") ?>
    <div id="page-index" class="page">
      <div class="page-region">
        <div class="page-region-content">
          <!-- grid1 -->
          <div class="grid">
            <!-- 图表展示 -->
            <div class="row">
              <div class="span12"
              <!-- 图表 -->
                  <div id="chart1" style="background:#F1F1F1;"> </div>
              </div>
            </div>
          </div>          
          <!-- grid1 end -->
          <!-- grid2 -->
          <div class="grid">
            <div id="pie"></div>
          </div>
          <!-- grid2 end -->

          <!-- grid3  -->
          <div class="grid">
            <div class="row">
              <!--  项目预警情况-->
              <div class="span4">
                <h2>项目预警<i class="icon-bell" style="font-size:18px;color:red"></i></h2>
                <ul class="listview fg-color-white">
                  <li class="bg-color-green">
                    <div class="icon">
                      <i class="icon-rocket"></i>
                    </div>
                    <div class="data">
                      <h4 class=" fg-color-white">恭喜</h4>
                      <p>
                        项目进展顺利，超过预期~<br/>
                      </p>
                    </div>
                  </li>
                  <li class="bg-color-orange selected">
                    <div class="icon">
                      <i class="icon-thumbs-up"></i>
                    </div>
                    <div class="data">
                      <h4 class=" fg-color-white">正常</h4>
                      <p>
                        项目进展正常，请继续保持奥~
                      </p><br/>
                    </div>
                  </li>
                  <li class="bg-color-red">
                    <div class="icon">
                      <i class="icon-warning"></i>
                    </div>
                    <div class="data">
                      <h4 class=" fg-color-white">注意</h4>
                      <p>
                        项目进展慢了，要加油，否则可能会延期
                      </p>
                    </div>
                  </li>
                </ul>
              </div>
              <!-- 项目基本信息 -->
              <div class="span4">
                <h2>项目基本信息</h2>
                <p>
                  项目名称: <a name="Name"></a>
                </p>
                <p>
                  项目经理：<a name="Admin"></a>
                </p>
                <p>
                  预期完成时间: <a name="Dtexpect"></a>
                </p>
                <p>
                  备注:<a name="Demo"></a>
                </p>
                <h1 style="margin-top:20px;" onclick="javascript:window.location.href='./projectDetail.php'">查看详细<i class="icon-arrow-right-3"></i></h1>
              </div>
              <!-- 其他项目 -->
              <div class="span4">
                <h2>其他项目</h2>
                <p>
                  这里列出其他项目，方便用户
                </p>
              </div>
            </div>
          </div>
          <!-- grid3 end -->
        </div>
      </div>
    </div>
    <?php include_once("../bottom.php") ?>
    <script>
     $(document).ready(function()
                       {       
                        asyncMethod('ctl=Module&ac=sum',render);
                        asyncMethod('ctl=Project&ac=detail',getInfo);
                        pie();
                        });
     function pie()
     {
       var data = [
         ['用户管理', 20],['权限及枚举', 10], ['项目管理', 30],
         ['模块管理', 30],['日志管理', 10]
       ];
       var plot1 = jQuery.jqplot ('pie', [data],
                                  {
           seriesDefaults: {
             // Make this a pie chart.
             renderer: jQuery.jqplot.PieRenderer,
             rendererOptions: {
               // Put data labels on the pie slices.
               // By default, labels show the percentage of the slice.
               showDataLabels: true
             }
           },
           legend: { show:true, location: 'e' }
         }
                                  );
     }
     //ajax method
     function asyncMethod(url,callback)
     {
       //load module
       $.ajax({
         url:'../../ctl/index.php?'+url,
         method:'get',
         dataType:'json',
         data:{
           strproid:"<?= !isset($_GET['strproid'])?'-1':$_GET['strproid']?>"
         },
         success:function(data){
           if(data.status=='suc')
           {
             callback(data);
           }
         },
         error:function(){
           alert("ajax error");
         }
       });
     }
     //add project module
     function addModule()
     {
       
     }
     function getInfo(data)
     {
       var info = data.detail;
       if(!info)return;
       $("a[name='Name']").html(info.strname);
       $("a[name='Admin']").html(info.strduty);
       $("a[name='Dtexpect']").html(info.dtexpect);
       $("a[name='Demo']").html(info.strdemo);
     }
     function render(data)
     {
       // For horizontal bar charts, x an y values must will be "flipped"
       // from their vertical bar counterpart.
       var plot2 = $.jqplot('chart1',[data.modules], {
         //seriesColors:["#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12","#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"],
         stackSeries:true,
           seriesDefaults: {
             renderer:$.jqplot.BarRenderer,
             // Show point labels to the right ('e'ast) of each bar.
             // edgeTolerance of -15 allows labels flow outside the grid
             // up to 15 pixels.  If they flow out more than that, they
             // will be hidden.
             pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
             // Rotate the bar shadow as if bar is lit from top right.
             shadowAngle: 135,
             // Here's where we tell the chart it is oriented horizontally.
             rendererOptions: {
               barDirection: 'horizontal'
             },
           pointLabels:{show:true}
           },
         series:[
           {label:"模块进度"}
         ],                  
         legend:{
           show:true,
           location:'se'
         },
           axes: {
           xaxis:{
             min:0,
             max:100.00
           },
             yaxis: {
               renderer: $.jqplot.CategoryAxisRenderer
             }
           }

         });
       $("#chart1").bind('jqplotDataClick',function(ev,seriesIndex,pointIndex,data){
         //alert(seriesIndex+" "+pointIndex+" "+data);
         alert(plot2.series[seriesIndex].label);
       });
     }
     function addRec()
     {
       $.ajax({
         url:'../../ctl/index.php?ctl=Project&ac=addRec',
         method:'POST',
         dataType:'json',
         data:$("form:first").serialize(),
         success:function(data){
           if(data.status=='suc')
           {
             $("#proLink").attr("href","./projectInfo.php?strproid="+data.strproid);
             $("form:first input").each(function(i){
               if($(this).attr("type")=="text")$(this).replaceWith("<p><i class='icon-arrow-right' style='font-size:25px;'></i><a style='font-size:30px;'>&nbsp;&nbsp;&nbsp;"+$(this).val()+"</a></p>");
               else 
               $(this).hide();
             });
             $("form:first textarea").each(function(i){$(this).replaceWith("<p><i class='icon-tag' style='font-size:25px;'></i><a style='font-size:30px;'>&nbsp;&nbsp;&nbsp;"+$(this).val()+"</a></p>")});
             $("form:first button").each(function(i){$(this).hide();});
             $("ul.replies").css("display","block");
           }
         },
         error:function(){
           alert("ajax error");
         }
       });
       return false;
     }
    </script>
  </body>
</html>
